/*
 * @Description: 库管理功能按钮
 * @Author: Zzt
 * @Date: 2022-10-27 15:36:18
 * @LastEditTime: 2022-10-28 14:22:46
 */
import { Button } from 'antd';
import classNames from 'classnames/bind';
import { useMemo, useState } from 'react';
import { useLIBManageContext } from '../contexts/LIBManageContext';
import styles from '../styles/LIBManage.module.scss';
import AddLibrary from './dialogs/AddLibrary';
import EditLibrary from './dialogs/EditLibrary';
const cx = classNames.bind(styles);

const PageOperate = () => {
  const { selectItems, delLIBManageFunc, libraryList } = useLIBManageContext();
  const [addLibraryVisible, setAddLibraryVisible] = useState(false);
  const [editLibraryVisible, setEditLibraryVisible] = useState(false);

  const delLibrary = () => {
    delLIBManageFunc(selectItems);
  };
  const addLibrary = () => {
    setAddLibraryVisible(true);
  };
  const editLibrary = () => {
    setEditLibraryVisible(true);
  };
  return (
    <div className={cx('box-title')}>
      <b>库列表</b>
      <Button className={cx('title-right')} onClick={delLibrary}>
        删除库
      </Button>
      <Button
        className={cx('title-right')}
        onClick={editLibrary}
        disabled={selectItems.length === 0}
      >
        修改库
      </Button>
      <Button className={cx('title-right')} onClick={addLibrary}>
        新建库
      </Button>
      {useMemo(
        () => (
          <AddLibrary
            visible={addLibraryVisible}
            onClose={() => {
              setAddLibraryVisible(false);
            }}
          />
        ),
        [addLibraryVisible]
      )}
      {useMemo(
        () => (
          <EditLibrary
            data={libraryList.find((item: any) => item.id === selectItems[0])}
            visible={editLibraryVisible}
            onClose={() => {
              setEditLibraryVisible(false);
            }}
          />
        ),
        [editLibraryVisible]
      )}
    </div>
  );
};
export default PageOperate;
